<template>
	<view class="content">
		<view class="content_list">
			<view class="content_list_label choiceCity" @click="addressShow = true">点击选择地址</view>
			<view class="content_list_content">
				<!-- {{address}} -->
				<pickerAddress v-model="addressShow" @confirm="addresspick" />
			</view>
		</view>
		<view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view>
		<view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view>
		<view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view><view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view><view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view><view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view><view class="" style="display: flex;">
			<view style="margin: 40rpx 30rpx 0 30rpx;">
				<image src="../../static/小区.jpeg" mode="" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;">
				</image>
			</view>
			<view style="margin:  40rpx 50rpx 0 0rpx;">
				<view style="font-size: 35rpx;font-weight: bold;">万科南山</view>
				<view style="font-size: 30rpx;color: #808080;">成都市新都区龙山路与五龙路交叉路口往西北约170米</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		data() {
			return {
				addressShow: false,
				form: {
					province: '',
					city: '',
					area: '',
				},
				address: ''
			}
		},
		onLoad() {

		},
		methods: {
			addresspick(obj) {
				let arr = ['province', 'city', 'area'];
				let place = '';
				arr.map(key => {
					this.form[key] = obj[key].AreaId
					place += obj[key].AreaName
				})
				this.address = place
			},
		},
		components: {
			pickerAddress
		}
	}
</script>

<style scoped>
	.choiceCity {
		width: 750rpx;
		height: 110rpx;
		font-size: 35rpx;
		font-weight: bold;
		background-color: #f6f7f8;
		text-align: center;
		line-height: 110rpx;
	}
</style>
<style lang="scss" scoped>
	.content {
		&_list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;

			&_lable {}

			&_content {
				flex: 1;
				width: auto;
				text-align: right;
			}
		}
	}
</style>
